<template>
	<view>
		<block v-for="(item,index) in sections" :key="idnex">
			<template v-if="item.view_type=='cells_auto_fill'">
				<view class="section cell_auto_fill">
					<image :src="item.body.items[0].img_url" mode="widthFix">
					</image>
				</view>
			</template>
			<template v-if="item.view_type=='divider_line'">
				<view class="section divider_line"></view>
			</template>
			<template v-if="item.view_type=='list_one_type15'">
				<view class="section list_one_type15">
					<view class="goods-list">
						<view class="item">
							<image :src="item.body.items[0].img_url" mode="" @click="toShopDetail(item)"></image>
							<view class="info-box el-flex">
								<view class="text">
									<view class="name text-ellipsis">
										{{item.body.items[0].product_name}}
									</view>
									<view class="brief text-ellipsis">
										{{item.body.items[0].product_brief}}
									</view>
								</view>
								<view class="info" @click="toShopDetail(item)">
									<view class="price">
										<text>￥</text> {{item.body.items[0].product_price}}
									</view>
									<view class="ui-button">
										<text>{{item.body.items[0].btn_txt}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

			</template>

		</block>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				sections: []
			};
		},
		methods: {
			toShopDetail(item) {
				let action = item.body.items[0].action
				if (action.productId && action.type == "product") {
					uni.navigateTo({
						url: `/subPage/proddetail/proddetail?id=${action.productId}`,
						success() {

						}
					})
				} else if (action.path && action.type == "product") {
					uni.navigateTo({
						url: `/subPage/proddetail/proddetail?id=${action.path}`,
						success() {

						}
					})
				}

			},
			fetchData(id) {
				this.$request.get('/getActivityPage', {
					id: id
				}).then((res) => {
					this.sections = res.data.data.sections
				}).catch(e => {
					console.log('错误了:', e)
				})
			},
		},
		onLoad(e) {
			this.fetchData(e.id)
		}
	}
</script>

<style lang="scss" scoped>
	.cell_auto_fill {
		image {
			display: block;
			width: 100%;
			vertical-align: middle;
		}
	}

	.list_one_type15 {
		.goods-list {
			padding: 0 0.16rem;

			.item {
				border-radius: 0.1rem;
				background-color: #fff;
				overflow: hidden;

				image {
					height: 3.66rem;
					display: block;
					width: 100%;
					vertical-align: middle;
				}

				.info-box {
					padding: 0.28rem;
					color: #000;

					.text {
						width: 4.12rem;
						padding-right: 0.2rem;

						.name {
							line-height: 1.2;
							color: #3c3c3c;
							font-size: .3rem;
							font-weight: bolder;
						}

						.brief {
							font-size: .2rem;
							height: 1.5em;
							line-height: 1.5em;
							color: #3c3c3c;
						}
					}

					.info {
						width: 2.2rem;

						.price {
							font-family: Heiti SC, STHeiti;
							font-size: .32rem;
							color: #ff4a48;
							font-weight: 700;
							text-align: right;
							line-height: 1em;
							height: 1.2em;
							white-space: nowrap;
							text-align: center;

							text {
								vertical-align: top;
								margin-right: -0.04rem;
								display: inline-block;
								font-size: .2rem;
								font-weight: lighter;
							}
						}

						.ui-button {
							height: 0.49rem;
							line-height: .49rem;
							background-color: rgb(245, 75, 75);
							color: rgb(255, 255, 255);
							display: block;
							width: 100%;
							text-align: center;
							font-size: .24rem;
							background: #ff4a48;
							border-radius: 3px;
							font-weight: bolder;

							text {}
						}
					}
				}
			}
		}
	}

	.divider_line {
		background-color: rgb(245, 245, 245);
		height: 0.24rem;
	}

	.section {}
</style>